<template>
  <a-row>
    <a-row class="mytitle">
      <!-- <a-icon :component="node" style="margin:0 .5rem 0 0" /> -->
      {{ $t("Node-info") }}
    </a-row>
    
    <NoAuthPage v-showNoAuth="'C3-1'"/>

    <a-row style="margin:1rem;" v-userAuth="'C3'">
      <a-col :xs="12" :sm="12" :md="12" :lg="7" :xl="7" :xxl="6" id="phybar">
        <a-card :bodyStyle="tstyle"><!--:title=-->
          <span slot="title" style="color:#333">{{ $t('Node') }}</span>
          <a-button
            slot="extra"
            type="primary"
            icon="fullscreen"
            size="small"
            @click="changeExtend"
          ></a-button>
          <a-button
            slot="extra"
            id="tabbtn"
            type="primary"
            style="margin-left: 1rem"
            size="small"
            @click="changeopen"
          >
            <a-icon :component="!open ? ic_unfold_01 : ic_unfold_02" />
          </a-button>
          <div>
            <a-spin
              :spinning="spinning"
              style="display:block;margin:23em auto"
            />
            <a-row
              class="nodecontent"
              :class="n.cluster_status == true ? 'bg_green' : 'bg_red'"
              :id="'node' + i"
              :key="i"
              v-for="(n, i) in nodedata"><!--status-->
              <a-col :span="17" class="simple" @click="changeOn(n, i)">
                <p class="tit" :class="n.cluster_status == true ? 'green' : 'red'"><!--status-->
                  {{ n.hostname }}
                </p>
                <span class="block">
                  {{ $t("Cluster-connection")
                  }}{{ $t("Status") }}：
                  <a-badge :status="n.cluster_status == true ? 'success' : 'error'" /><!--status-->
                  <b>{{
                    n.cluster_status == true
                      ? $t("Connected")
                      : $t("Not-connected")
                  }}</b>
                </span>
                <span class="block">
                  CPU {{ $t("Usage-rate") }}：
                  <!-- <b>{{ n.cpu ? n.cpu.percent + "%" : "" }}</b> -->
                  <b>{{ n.cpu_percent ? n.cpu_percent : "" }}</b>
                </span>
                <span class="block">
                  {{ $t("Memory") }}{{ $t("Usage-rate") }}：
                  <!-- <b>{{ n.mem ? n.mem.percent + "%" : "" }}</b> -->
                  <!-- <b>{{ n.mem_percent ? n.mem_percent : "" }}</b> -->
                  <b>{{ n.mem_percent ? n.mem_percent : "" }}</b>
                </span>
                <span class="block">
                  {{ $t("Disk") }}{{ $t("Usage-rate") }}：
                  <!-- <b>{{ n.disk ? n.disk.percent + "%" : "" }}</b> -->
                  <!-- <b>{{ n.disk_usage ? n.disk_usage : "" }}</b> -->
                  <b>{{ n.disk_usage ? n.disk_usage : "" }}</b>
                </span>
              </a-col>
              <a-col :span="17" class="detail" @click="changeOn(n, i)">
                <p class="tit" :class="n.cluster_status == true ? 'green' : 'red'"><!--status-->
                  {{ n.hostname }}
                </p>
                <span class="block">
                  {{ $t("Cluster-connection")
                  }}{{ $t("Status") }}:
                  <a-badge :status="n.cluster_status == true ? 'success' : 'error'" /><!--status-->
                  <b>{{
                    n.cluster_status == true
                      ? $t("Connected")
                      : $t("Not-connected")
                  }}</b>
                </span>
                <!--存储服务进程数-->
                <!-- <span class="block">
                  {{ $t("Storage-service-processes") }}：
                  <b>{{ n.store_num }}</b>
                </span> -->
                <span class="block">
                  OS:
                  <!-- <b>{{ n.system }}</b> -->
                  <!-- <b>{{ n.OS }}</b> -->
                  <b>{{ n.os }}</b>
                </span>
                <!-- <span class="block">
                  ssh port：
                  <b>22</b>
                </span> -->
              </a-col>
              <a-col :span="7" @click="changeOn(n, i)">
                <img 
                  ondragstart="return false"
                  oncontextmenu="return false"
                  :src="n.cluster_status | isstatus"
                  alt="status_img"
                  style="width:84px;height:74px;"
                />
                  <!-- style="margin-top:2.5rem" -->
                <!-- <a-icon type="hdd" style="font-size:5em;margin-top:3rem" :class="n.status == '正常'?'green':'red' "/> -->
              </a-col>
              <a-col :span="24" class="detail" @click="changeOn(n, i)">
                <span class="block">
                  kernel:
                  <b>{{ n.kernel }}</b>
                </span>
              </a-col>
              <a-col :span="12" class="detail" @click="changeOn(n, i)">
                <a-col :span="6">
                  <img 
                    ondragstart="return false"
                    oncontextmenu="return false"
                    src="../../../static/images/png/ic_CPU.png" class="icons" alt="cpu_image"
                  >
                  <!-- <a-icon :component="cpuicon" class="icons"></a-icon> -->
                </a-col>
                <a-col :span="18">
                  <span class="block textF">
                    <span class="textF2">{{ $t("Usage-rate") }}:</span>
                    <!-- <b>{{ n.cpu ? n.cpu.percent + "%" : "" }}</b> -->
                    <span class="textF3">{{ n.cpu_percent ? n.cpu_percent : "" }}</span>
                  </span>
                  <span class="block textS">
                    <span class="textF2">{{ $t("Total-frequency") }}:</span>
                    <!-- <b>{{ n.cpu ? n.cpu.rate + "GHz" : "" }}</b> -->
                    <!-- <span class="textF3">{{ n.cpu_rate ? n.cpu_rate : "" }}</span> -->
                    <span class="textF3">{{ n.cpu_frequency ? n.cpu_frequency : "" }}</span>
                  </span>
                </a-col>
              </a-col>

              <a-col :span="12" class="detail" @click="changeOn(n, i)">
                <a-col :span="6">
                  <img 
                    ondragstart="return false"
                    oncontextmenu="return false"
                    src="../../../static/images/png/ic_memory.png" class="icons" alt="memory_img">
                  <!-- <a-icon :component="memoryicon" class="icons"></a-icon> -->
                </a-col>
                <a-col :span="18">
                  <span class="block textF">
                    <span class="textF2">{{ $t("Usage-rate") }}:</span>
                    <!-- <b>{{ n.mem ? n.mem.percent + "%" : "" }}</b> -->
                    <span class="textF3">{{ n.mem_percent ? n.mem_percent : "" }}</span>
                  </span>
                  <span class="block textS">
                    <span class="textF2">{{ $t("Total-memory") }}:</span>
                    <!-- <b>{{ n.mem ? bytesToBs(n.mem.total) : "" }}</b> -->
                    <!-- <span class="textF3">{{ n.ram_total ? n.ram_total : "" }}</span> -->
                    <span class="textF3">{{ n.mem_total ? n.mem_total : "" }}</span>
                  </span>
                </a-col>
              </a-col>
              <a-col :span="12" class="detail" @click="changeOn(n, i)">
                <a-col :span="6">
                  <img 
                    ondragstart="return false"
                    oncontextmenu="return false"
                    src="../../../static/images/png/ic_disk.png" class="icons" alt="disk_img">
                  <!-- <a-icon :component="diskicon" class="icons"></a-icon> -->
                </a-col>
                <a-col :span="18">
                  <span class="block textF">
                    <span class="textF2">{{ $t("Usage-rate") }}:</span>
                    <!-- <b>{{ n.disk ? n.disk.percent + "%" : "" }}</b> -->
                    <span class="textF3">{{ n.disk_usage ? n.disk_usage : "" }}</span>
                  </span>
                  <span class="block textS">
                    <span class="textF2">{{ $t("Total-capacity") }}:</span>
                    <!-- <b>{{ n.disk ? bytesToBs(n.disk.total) : "" }}</b> -->
                    <span class="textF3">{{ n.disk_total ? n.disk_total : "" }}</span>
                  </span>
                </a-col>
              </a-col>
              <a-col :span="12" class="detail" @click="changeOn(n, i)">
                <a-col :span="6">
                  <img 
                    ondragstart="return false"
                    oncontextmenu="return false"
                    src="../../../static/images/png/ic_net.png" class="icons" alt="net_img">
                  <!-- <a-icon :component="neticon" class="icons"></a-icon> -->
                </a-col>
                <a-col :span="18">
                  <span class="block textF">
                    <span class="textF2">{{ $t("Problem-network-cards") }}:</span>
                    <!-- <b>{{ n.net ? n.net.err : "" }}</b> -->
                    <span class="textF3">{{ n.net_infos ? n.net_infos.length : "" }}</span>
                  </span>
                  <span class="block textS">
                    <span class="textF2">{{ $t("Total-network-cards") }}:</span>
                    <!-- <b>{{ n.net ? n.net.num : "" }}</b> -->
                    <span class="textF3">{{ n.net_infos ? n.net_infos.length : "" }}</span>
                  </span>
                </a-col>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
      <a-col
        :xs="12"
        :sm="12"
        :md="12"
        :lg="17"
        :xl="17"
        :xxl="18"
        style="min-height:49.5rem;background-color:white">
        <Phycontent
          :info="nodedata"
          :btn="btn"
          :loading="spinning"
          @updateData="updateData"
        ></Phycontent>
      </a-col>
    </a-row>
  </a-row>
</template>
<script>
import Phycontent from "../../components/physical/Phycontent";
// import neticon from "../../../static/images/svg/ic_net.svg";
// import cpuicon from "../../../static/images/svg/ic_CPU.svg";
// import memoryicon from "../../../static/images/svg/ic_memory.svg";
import ic_unfold_01 from "../../../static/images/svg/ic_unfold_01.svg";
import ic_unfold_02 from "../../../static/images/svg/ic_unfold_02.svg";
// import diskicon from "../../../static/images/svg/ic_disk.svg";
// import phyicon from "../../../static/images/svg/ic_physical_select.svg";
// import node from "../../../static/images/svg/ic_node.svg";
import $ from "jquery";
import request from '@/request/request'
import NoAuthPage from '@/components/common/NoAuthPage'

export default {
  name: "physical",
  components: { Phycontent, NoAuthPage },
  template:
    '<a-icon :component = "ic_unfold_01, ic_unfold_02" />',//neticon,cpuicon,memoryicon,diskicon,phyicon,node
  data() {
    return {
      // neticon,
      // cpuicon,
      // memoryicon,
      ic_unfold_01,
      ic_unfold_02,
      // diskicon,
      // phyicon,
      // node,
      nodedata: [],
      open: false,
      btn: "",
      imgflag: "",
      // timeoutId:'', //定时器
      spinning: true,
      tstyle: {
        height: "46rem",
        "overflow-y": "auto",
        "background-color": "var(--mainGreyColor)",
      },
    };
  },
  filters: {
    isstatus: function(val) {
      if (val) return require("../../../static/images/png/ic_server_normal.png")
      else require("../../../static/images/png/ic_server_abnormal.png");
    },
  },
  updated() {},
  mounted() {
    this.timeoutId = setInterval(this.dbgetdata, 90000); //定时刷新页面数据
    this.getdata();
    $(".simple").css("display", "block");
    $(".detail").css("display", "none");
  },
  destroyed() {
    clearInterval(this.timeoutId); //清除定时器
  },
  methods: {
    getdata() {
      this.spinning = true;
      request('get', "machine/").then((res) => {
        // console.log('节点信息',res)
        this.nodedata = res.data;
        if (this.btn == "") {
          this.btn = this.nodedata[0];
          localStorage.setItem('btnInfo',JSON.stringify(this.btn))
          this.$nextTick(() => {
            //刚刚进行的赋值操作，当前并没有引起视图层的更新,使用$nextTick方法，可以对未来更新后的视图dom进行操作
            if (this.btn.status) {
              $("#node0").css("border", "3px solid #059db3");
              // $('#node'+0).siblings().css('box-shadow','none')
            } else {
              // $("#node0").css("border", "3px solid #fc1b60");
              $("#node0").css("border", "3px solid #006db8");
              // $('#node'+0).siblings().css('box-shadow','none')
            }
          });
        }
        // this.diskimg();
        this.diskimg(this.btn.disks_layout);
        this.diskimg(this.btn.disks);
        this.spinning = false;
      });
    },
    dbgetdata() {
      request('get', "machine/").then((res) => {
        this.nodedata = res.data;
        if (this.btn == "") {
          this.btn = this.nodedata[0];
          localStorage.setItem('btnInfo',JSON.stringify(this.btn))
          this.$nextTick(() => {
            //刚刚进行的赋值操作，当前并没有引起视图层的更新,使用$nextTick方法，可以对未来更新后的视图dom进行操作
            if (this.btn.status) {
              $("#node0").css("border", "3px solid #059db3");
            } else {
              // $("#node0").css("border", "3px solid #fc1b60");
              $("#node0").css("border", "3px solid #006db8");
            }
          });
        }
        // this.diskimg();
        this.diskimg(this.btn.disks_layout);
        this.diskimg(this.btn.disks);
      });
    },
    changeopen() {
      this.open = !this.open;
      if (!this.open) {
        $(".simple").slideDown("slow");
        $(".detail").css("display", "none");
        // $("#tabbtn").css("transform", "rotate(0deg)");
      }
      if (this.open) {
        $(".detail").slideDown("slow");
        $(".simple").css("display", "none");
        // $("#tabbtn").css("transform", "rotate(90deg)");
      }
    },
    changeExtend() {
      this.$router.push({ path: "/phyList" });
    },
    changeOn(n, i) {
      console.log('当前节点', n)
      this.btn = n;
      this.diskimg(this.btn.disks_layout);
      this.diskimg(this.btn.disks);
      this.btn.imgflag = this.imgflag;
      if (n.status) {
        $("#node" + i).css("border", "3px solid #059db3");
        $("#node" + i)
          .siblings()
          .css("border", "3px solid #e3f5ff");
      } else {
        // $("#node" + i).css("border", "3px solid #fc1b60");
        $("#node" + i).css("border", "3px solid #006db8");
        $("#node" + i)
          .siblings()
          .css("border", "3px solid #e3f5ff");
      }
    },
    diskimg(temp) {
      for (let item in temp) {
        let task = "";
        if (typeof temp[item].values == "object") {
          task = temp[item].values;
        } else {
          task = temp[item];
        }
        for (const subItem of task) {
          if (subItem.type == 1) {
            if (subItem.status) {
              this.imgflag = "tHDD";
            } else {
              this.imgflag = "fHDD";
            }
          } else if (subItem.type == 0) {
            if (subItem.status) {
              this.imgflag = "tSSD";
            } else {
              this.imgflag = "fSSD";
            }
          } else {
            this.imgflag = "NULL";
          }
          subItem.imgflag = this.imgflag;
        }
      }
    },
    // diskimg() {
    //   for (var item in this.btn.disks_layout) {
    //     for (var i = 0; i < this.btn.disks_layout[item].values.length; i++) {
    //       // if(this.btn.disks_layout[item].values[i] !== {}){
    //       //     console.log('有的')
    //       if (this.btn.disks_layout[item].values[i].type == 1) {
    //         if (this.btn.disks_layout[item].values[i].status == true) {
    //           this.imgflag = "tHDD";
    //         } else {
    //           this.imgflag = "fHDD";
    //         }
    //       } else if (this.btn.disks_layout[item].values[i].type == 0) {
    //         if (this.btn.disks_layout[item].values[i].status == true) {
    //           this.imgflag = "tSSD";
    //         } else {
    //           this.imgflag = "fSSD";
    //         }
    //       } else {
    //         this.imgflag = "NULL";
    //       }
    //       this.btn.disks_layout[item].values[i].imgflag = this.imgflag;
    //       // }
    //     }
    //   }
    // }
    updateData(nowNode,) {
      this.spinning = true;
      request('get', "machine/").then((res) => {
        // console.log('节点信息',res)
        this.nodedata = res.data;
        this.btn = this.nodedata.filter(item => {
          return nowNode.hostname == item.hostname;
        })[0];
        localStorage.setItem('btnInfo',JSON.stringify(this.btn))
        this.spinning = false;
      });
    },
  },
};
</script>
<style scoped>
.detail {
  display: none;
  margin-bottom: 0.5rem;
}
#phybar {
  /* background-color: #e3f5ff; */
  height: 100%;
  padding-right: 8px;
  box-shadow: 0px 2px 8px #ccc;
}
.expend {
  background-color: white;
  height: 3rem;
  box-shadow: 0px 3px 10px #bbbbbb;
}
.tit {
  font-size: 26px;
  font-weight: 700;
}
.nodecontent {
  background-color: white;
  margin-bottom: 14px;
  padding: 1rem;
  padding-bottom: 2rem;
  cursor: pointer;
  /* border:3px solid yellow */
}
/* #node0 {
  box-shadow: rgba(24, 144, 255, 0.6) 3px 3px 5px;
} */
.bg_green {
  border-radius: 0.1em;
  background-image: url("../../../static/images/green.png");
  background-repeat: no-repeat;
  background-position: bottom;
  border: 3px solid #fff;
  /* border-left: 3px solid #059db3; */
}
.bg_red {
  border-radius: 0.1em;
  background-image: url("../../../static/images/red.png");
  background-repeat: no-repeat;
  background-position: bottom;
  border: 3px solid #fff;
  /* border-left: 3px solid #fc1b60; */
}
.green {
  color: var(--mainGreenColor);
}
.red {
  color: var(--mainRedColor);
}
.textF {
  /* font-weight: bold; */
  font-size: 14px;
}
.textF2 {
  color: #666;
}
.textF3 {
  color: #333;
}
.textS {
  font-size: 12px;
}
.icons {
  width: 30px;
  height: 30px;
}
</style>
